<template>
  <el-form
    ref="ruleFormRef"
    :model="formInline"
    :rules="formRules"
    label-width="auto"
    label-position="top"
    v-loading="isLoading"
  >
    <el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.projectName" prop="">
          {{ isNullOrEmpty( operateInfo.projectName ) }}
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.processName" prop="processName">
          <el-input
          :maxlength="30" :show-word-limit="true"
            v-model="formInline.processName"
            clearable
            :placeholder="prompt?.processName"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="通知方式" prop="sellMethod">
          <el-checkbox-group v-model="formInline.noticeType">
            <el-checkbox
              v-for="item in WORKORDER_NOTICE_TYPE"
              :key="item.value"
              :value="item.value"
            >
              {{ isNullOrEmpty( item.label ) }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.status" prop="status">
          <el-radio-group v-model="formInline.status">
            <el-radio
              v-for="item in STRATEGYSTATUS"
              :key="item.value"
              :value="item.value"
            >
              {{ isNullOrEmpty( item.label ) }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </re-col>

      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="流程节点" prop="">
          <el-table
            :data="formInline.node"
            border
            style="width: 100%"
            footer-row-class-name="hide"
          >
            <el-table-column
              prop="day"
              label="步骤"
              minWidth="120"
              show-overflow-tooltip
            >
              <template v-slot="scope">
                <el-input
                  v-model.trim="scope.row.stepId"
                  :disabled="scope.$index == 0"
                  type="number"
                  :min="scope.$index == 0 ? 1 : 2"
                  oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/\D/g,'');if(value<2)value=null"
                  placeholder=""
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="day"
              label="节点名称"
              minWidth="120"
              show-overflow-tooltip
            >
              <template v-slot="{ row }">
                <el-input
                  v-model.trim="row.stepName"
                  :disabled="row.stepId == 1"
                  placeholder=""
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="noticeUser"
              label="可操作用户"
              show-overflow-tooltip
              minWidth="180"
            >
              <template v-slot="{ row }">
                <authorizeuserproject
                  v-model="row.operateUser"
                  :projectId="projectId"
                  clearable
                  :isall="1"
                  multiple
                  placeholder="请选择"
                  :style="{ width: '100%' }"
                />
                <!-- <el-select
                  v-model="row.operateUser"
                  multiple
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in WORKORDER_TYPE"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select> -->
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" minWidth="60">
              <template v-slot="scope">
                <el-space>
                  <sj-link
                    custom-type="sred"
                    :disabled="scope.row.stepId == 1"
                    :underline="false"
                    @click="deletes(scope)"
                    >删除</sj-link
                  >
                </el-space>
              </template>
            </el-table-column>
          </el-table>
          <div class="footer-wrapper">
            <el-table
              :data="[100]"
              :show-header="false"
              :border="true"
              class="footer-table"
            >
              <el-table-column label="">
                <template #default>
                  <div
                    class="text-center cursor-pointer py-[10px] text-[#4583ff]"
                    @click="addsetup"
                  >
                    添加
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import authorizeuserproject from "@/components/select/authorizeuser/authorizeuserproject.vue";
import { WORKORDER_NOTICE_TYPE } from "@/constant/workorder-mangenment";
import {
  WORKORDER_TYPE,
  WORKORDER_DISPATCH_TYPE
} from "@/constant/workorder-mangenment";
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { STRATEGYSTATUS } from "@/constant/device-mangenment";
import { titles, prompt } from "./index";
import type { infoType } from "@/api/operate/work-management/process-configuration/index";
import { formValidateField } from "@/utils/functions";
type FormProps = {
  formInline: infoType;
  isLoading: boolean;
  projectId: number;
};

import { usePageVariablesStoreHook } from "@/store/modules/pageVariables";
const operate = usePageVariablesStoreHook().getOperate();
const usePageVariablesStore = usePageVariablesStoreHook();
const operateInfo = ref(usePageVariablesStore.getOperate());
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({}) as infoType,
  isLoading: false,
  projectId: null
});
const formRules = reactive(<FormRules>{
  id: [{ required: true, message: prompt?.id, trigger: "blur" }],
  projectName: [
    { required: true, message: prompt?.projectName, trigger: "blur" }
  ],
  processName: [
    { required: true, message: prompt?.processName, trigger: "blur" }
  ],
  noticeType: [
    { required: true, message: prompt?.processName, trigger: "blur" }
  ],
  status: [{ required: true, message: prompt?.status, trigger: "blur" }],
  nodeCount: [{ required: true, message: prompt?.nodeCount, trigger: "blur" }],
  createdAt: [{ required: true, message: prompt?.createdAt, trigger: "blur" }]
});
const ruleFormRef = ref();
//    const newFormInline = ref(props.formInline as any);
//
//
//    watch(()=>props.formInline,()=>{
//    	newFormInline.value = props.formInline
//    },{
//    	deep:true,
//    	immediate:true
//    })
function getRef() {
  return ruleFormRef.value;
}
//添加步骤
const addsetup = () => {
  props.formInline.node.push({ stepName: "", stepId: "", operateUser: [] });
};
//删除步骤
const deletes = ite => {
  props.formInline.node.splice(ite.$index, 1);
};
onMounted(() => {
  console.log(props.projectId, "1111111");
  //  newFormInline.value = props.formInline
});

defineExpose({ getRef });
</script>
<style scoped lang="scss">
.hide {
  display: none;
}

/* 设置尾部添加的行的样式 */
.footer-wrapper {
  margin-top: -1px; /* 重叠原表格的分隔线 */
  width: 100%;
  ::v-deep(.el-table__cell) {
    padding: 0 !important;
  }
}
.footer-table .el-table__row {
  padding: 0 !important;
  background-color: #f2f2f2; /* 设置合计行的背景色 */
}
</style>
